<template>
  <div class="app-container">
    <div class="brandcon">
      <div class="brand-tit">
        <h2 class="mod_title">品牌详情</h2>
        <el-button type="primary" plain class="el-icon-warning" @click="handfeedback">错误反馈</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-descriptions v-model="Brand" :column="1" size="medium" class="brandinfo">
            <el-descriptions-item label="品牌名称"> {{Brand.Name}} </el-descriptions-item>
            <el-descriptions-item label="品牌官网"> <div class="mousestyle" @click="goUrl(Brand.WebSite)">{{Brand.WebSite}}</div> </el-descriptions-item>
            <el-descriptions-item label="中文名称"> {{Brand.CNName}} </el-descriptions-item>
            <el-descriptions-item label="首字母"> {{Brand.Letter}} </el-descriptions-item>
            <el-descriptions-item label="英文名称"> {{Brand.ENName}} </el-descriptions-item>
            <el-descriptions-item label="来源"> {{Brand.FromID?Brand.FromID:"导入"}} </el-descriptions-item>
            <el-descriptions-item label="品牌简称"> {{Brand.ShortName}} </el-descriptions-item>
            <el-descriptions-item label="生产商"> {{Brand.Manufacturer}} </el-descriptions-item>
             <el-descriptions-item label="品牌说明" labelStyle="width: 150px;text-align:right;"> {{Brand.Summary}} </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="5">
          <el-image v-if="imageUrl" :src="imageUrl">
          </el-image>
        </el-col>
      </el-row>
     
    </div>
   
    <!--别名管理-->
    <div>
      <el-divider></el-divider>
      <h3 class="mod_title">品牌别名</h3>
        <ul class="namecon">
          <li class="nameitem" v-for="tag in Brand.PetNames" :key="tag.name">{{tag}}</li>
        </ul>
    
    </div>
    <!--关联关系管理-->
    <div>
      <el-divider></el-divider>
      <h3 class="mod_title">关联品牌</h3>
       <ul class="namecon">
          <li class="nameitem" v-for="item in Brand.Relations" :key="item.ID">{{item.RelationName}}</li>
        </ul>
    </div>
  
    <!--渠道管理-->
    <div>
      <el-divider></el-divider>
      <h3 class="mod_title">外部渠道</h3>
       <el-table
     :data="tableData"
     border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="渠道"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
    >
    </el-table-column>
  </el-table>
    </div>
      <!--错误反馈-->
    <el-dialog title="错误信息反馈" :visible.sync="open" :close-on-click-modal="false">
      <feedback @close="Cancelfeedback" ref="feedback"></feedback>
    </el-dialog>
  </div>
</template>
 <script>
import { Details } from '../../api/brand'; //引入api 的接口
import feedback from './../../components/feedback.vue';
export default {
  components: {
    feedback
  },
  data() {
    return {
      open: false,
      Loading: true,
      BrandID: undefined,
      value: [],
    tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          
        }, {
          date: '2016-05-04',
          name: '王小虎',
         
        }, {
          date: '2016-05-01',
          name: '王小虎',
        
        }, {
          date: '2016-05-03',
          name: '王小虎',
      
        }],
        normalizer(node){
        // 去掉children=null的属性
        if(node.children == null || node.children == 'null'){
          delete node.children;
        }
      },
      imageUrl: '',
      Feedback: {
        ID: undefined,
        Name: undefined,
        FeedbackType: undefined,
        FeedbackText: undefined,
        FromID: undefined
      },
      Brand: []
    };
  },
  created() {
    if (this.$route.query.id) {
      this.BrandID = this.$route.query.id;
      //修改
      Details(this.$route.query.id).then(response => {
        this.Brand = response.data;
        console.log(this.Brand);
        this.value = response.data.CategoriesID;
        if (response.data.Image) {
          this.imageUrl = response.data.Image;
        }
      });
     
    }
  },
  methods: {
    handfeedback() {
      this.open = true;
      this.$nextTick(() => {
        this.Feedback.FromID = this.Brand.ID;
        this.Feedback.Name = this.Brand.Name;
        this.Feedback.FeedbackType = 200;
        this.$refs.feedback.loadfrom(this.Feedback);
      });
    },
    Cancelfeedback() {
      this.open = false;
    },
    goUrl(url){
      // console.log(url);
       window.open(url,'_blank');
    }
  }
};
</script>

<style scoped>
@import './../../assets/reset.css';
.app-container{
  cursor: pointer;
}
.mod_title {
    font-size: 17px;
}
.mod_title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #286af6;
    vertical-align: middle;
    overflow: hidden;
    margin: -3px 4px 0 0;
}
.brand-tit{
  display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.brand-tit .el-icon-warning:before {
    color: #f00;
    margin-right: 5px;
}

.brandinfo tbody{
width: 50%;
}
.mousestyle{
  cursor: pointer;
  color:#409EFF ;
  border-bottom: 1px solid #409EFF;
}

/deep/ .el-descriptions-item__label {
  color: #a0a0a1;
  width: 120px;
}
/deep/ .el-descriptions-item__content {
  color: #323232;
}
/deep/ .el-image__error {
  padding: 4px 10px;
}
.namecon{
  width: 100%;
  display: flex;
  font-size: 15px;
  flex-wrap: wrap;
  cursor: pointer;
}
.nameitem{
    padding: 7px 18px;
    line-height: 20px;
    font-size: 14px;
    color: #666D79;
  border: 1px solid #D7D7D7;
  box-sizing: border-box;
}
</style>